<template>
  <!-- 修改用户信息页面 路由组件 -->
  <ul class="edit-user-info">
    <li class="info-item">
      <label for="">昵称</label>
      <input type="text" v-model="name" />
    </li>
    <li class="info-item">
      <div class="submit" @click="updateUserInfo">提交修改</div>
    </li>
  </ul>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "EditUserInfo",
  computed: {
    /* 用户信息 */
    ...mapState("user", ["userInfo"]),
  },
  mounted() {
    /* 用户信息 */
    this.name = this.userInfo.name;
  },
  data() {
    return {
      name: "",
    };
  },
  methods: {
    /* 编辑用户信息 */
    ...mapActions("user", ["editUserInfo"]),
    /* 更新用户信息业务处理 */
    updateUserInfo() {
      if (!this.name) {
        return this.$message({
          message: "用户信息未填写完整！",
          type: "error",
        });
      }
      const userInfo = {
        name: this.name,
      };
      this.editUserInfo(userInfo);
    },
  },
};
</script>

<style lang="less" scoped>
.edit-user-info {
  display: flex;
  // align-items: center;
  flex-direction: column;
  .info-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.1rem;
    input {
      outline: none;
      border: 0;
      padding: 0.05rem 0;
      padding-left: 0.1rem;
      background-color: rgba(103, 103, 103, 0.5);
      color: #fff;
      font-size: 00.1rem;
      max-width: 5rem;
      min-height: 0.5rem;
    }
    label {
      font-size: 0.2rem;
      margin-right: 0.1rem;
      margin-bottom: 0.05rem;
    }
    .submit {
      margin-left: 0.1rem;
      font-size: 0.2rem;
      padding: 0.1rem;
      color: #000;
      border-radius: 0.1rem;
      cursor: pointer;
      background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  }
}
</style>